<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <head>
        <title>字符串操作函数</title>
        <link href="style23.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">字符串操作函数</span> 
                <span class="fr">
                    <input id="btnShow" name="btnShow" type="button" value="计算" />
                </span>
            </div>
            <div class="content">
                <input id="txtName" name="txtName" type="text" />
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    $(".tip").html("");
                    var strTmp = "内容：";
                    var strOld = $("#txtName").val();
                    var strNew =$.trim(strOld);
                    strTmp += strOld;
                    strTmp += "<br/><br>除掉空格符前的长度："
                    strTmp += strOld.length;
                    strTmp += "<br/><br>除掉空格符后的长度："
                    strTmp += strNew.length;
                    $(".tip").show().append(strTmp);
                });
            });
        </script>
    </body>
    <br>
    <h4>
        字符串操作函数

调用名为$.trim的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格，调用格式为：

$.trim (str);

参数str表示需要删除左右两边空格符的字符串。
    </h4>
</html>